<template>
  <div class="filter-status-badge" @click="handleClick">
    <el-tag 
      :type="filtered ? 'warning' : 'success'" 
      size="small"
      :effect="filtered ? 'dark' : 'light'"
    >
      {{ filtered ? '已过滤' : '正常' }}
    </el-tag>
    <div v-if="filtered && reason" class="filter-reason" :title="reason">
      {{ truncatedReason }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  filtered: boolean
  reason?: string
}

const props = withDefaults(defineProps<Props>(), {
  filtered: false,
  reason: ''
})

const emit = defineEmits<{
  (e: 'click-filter'): void
}>()

const truncatedReason = computed(() => {
  if (!props.reason) return ''
  return props.reason.length > 20 ? props.reason.substring(0, 20) + '...' : props.reason
})

const handleClick = () => {
  emit('click-filter')
}
</script>

<style scoped lang="scss">
.filter-status-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  
  .filter-reason {
    font-size: 12px;
    color: #909399;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>